/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #2961df;
  --ifm-color-primary-dark: #1f55cf;
  --ifm-color-primary-darker: #1d50c3;
  --ifm-color-primary-darkest: #1842a1;
  --ifm-color-primary-light: #4072e2;
  --ifm-color-primary-lighter: #4b7ae4;
  --ifm-color-primary-lightest: #6e94e9;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* Hide unwanted navigation items */
.menu__list-item:has(> .menu__link[href="/docs"]),
.menu__list-item:has(> .menu__link[href="/tutorial"]) {
  display: none;
}

/* Hide unwanted footer items */
.footer__link-item[href="/docs"],
.footer__link-item[href="/tutorial"] {
  display: none;
}

/* Video Grid Styles */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  border-radius: var(--ifm-card-border-radius);
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-info {
  margin-top: 0.75rem;
}

.video-title {
  font-weight: 500;
  color: var(--ifm-heading-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-height: 2.8em; /* 2 lines * 1.4 line-height */
}

/* Basic Codicon styles */
.codicon {
  vertical-align: middle;
  line-height: 1;
}

/* Ensure code blocks wrap instead of scrolling */
pre {
  white-space: pre-wrap !important;  /* Allows wrapping */
  word-wrap: break-word !important;  /* Breaks long words */
  overflow-x: auto;  /* Enables horizontal scrolling if necessary */
}